import { Card, Form, Input, Button, InputNumber } from 'antd';
export default function FormComponent() {
  const [form] = Form.useForm(); // form -> FormInstance
  const onFinish = (values) => {
    console.log('表单提交了', values);
  };
  return (
    <Card>
      商品价格为50元每包 槟榔 50 元
      <Form
        // initialValues -> Form.Item 的 name对应
        initialValues={{
          username: '传智播客',
          num: 1,
          money: 50,
        }}
        form={form}
        // 当 Button 按钮的属性 htmlType="submit" 点击时触发onFinish
        onFinish={onFinish}
        onValuesChange={(changedValues) => {
          if (changedValues.num) {
            form.setFieldValue('money', changedValues.num * 50);
          }
        }}
      >
        {/* <Form.Item label="用户名" name="username">
          <Input style={{ width: 240 }} />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input style={{ width: 240 }} />
        </Form.Item> */}
        <Form.Item label="数量" name="num">
          <InputNumber />
        </Form.Item>
        <Form.Item label="金额" name="money">
          <InputNumber disabled />
        </Form.Item>
        {/* <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item> */}
        <Form.Item>
          <Button
            type="primary"
            onClick={() => {
              console.log(form.getFieldsValue());
              console.log(form.getFieldValue('username'));
            }}
          >
            提交
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
